html body {
    height: 100vh;
    width: 100%;
    color: '#fff';
  overflow: hidden;

}



.screen_body_bg {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background-image:url("../img/screenImg/newstyle/new_bodybg.png"); 
     background-position: center 0;
      background-repeat: no-repeat;
      background-attachment:fixed;
     background-size: cover;
      -webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */
       -o-background-size: cover;/* 兼容Opera */
       zoom: 1;   
  
  
}
* {
    margin: 0;
    padding: 0;
}

/* @font-face {
    font-family: electronicFont;
    src: url('../font/DS-DIGIT.TTF')
} */

.screen_empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.3em;
    color: #fff;
    border-bottom: 1px solid steelblue;
    box-shadow: 10px 10px 10px #1f28a83a;
    text-shadow: steelblue 2px;
}

.screen_empty1 {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.3em;
    color: #fff;
    border-bottom: 1px solid steelblue;
    box-shadow: 10px 10px 10px #1f28a83a;
    text-shadow: steelblue 2px;
}

.screen_templeate_title {
    width: 98%;
    height: 2.75rem;

    line-height: 2.55rem;
    /* margin: 10px; */
    color: #00A8FF;
    background: url(../img/screenImg/newstyle/line.png);
    background-size: 100% 100%;
    font-size: 1.125rem;
    text-align: left;
    text-indent: 1em;
    font-weight: bold;
    letter-spacing: 1px;
    vertical-align: middle;
}
.screen_templeate_title::before{
    content: ' ';
    width: 5px;
    height: 22px;
    vertical-align: middle;
    
/* line-height: 4.55rem; */
    display: inline-block;
margin: 0px 3px;



    background-color: #00A8FF;;
}

.screen_templeate_subtitle {
    margin-left: 1.25rem;
    color: tomato;
    font-size: 1rem;
}

.screen_BgImg_top {
    height: 7vh;
    /* margin-bottom: 2rem; */
}

.titleline {
    width: 100%;
    height: 2rem;
    background-image: url(../img/screenImg/newstyle/titleline.png);
    background-size: 100% 100%;
    margin-top: -1.875rem;
}

.page_title {
    width: 100%;
    /* margin-top: 1rem; */
    font-size: 2.2rem;
    text-align: center;
    color: #2799C7;
    display: inline-block;
    background-image: -webkit-linear-gradient(bottom, #00A8FF, #00EAFF, #00A8FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.screen_center {
    width: 98vw;
    height: 93vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto;
    /* height: 87.2777%; */
    overflow: hidden;
}

.screen_center>div {
    flex: 1;
}

.screen_margin {
    /* margin: 0 2.8125rem; */
    height: 100%;
}

ul li {
    list-style: none;
}

#screenNavlist li:nth-of-type(even) {
    float: right;
    margin-left: 1.9375rem;
}

#screenNavlist li:nth-of-type(odd) {
    float: left;
    /* text-align: right; */
    margin-right: 1.9375rem;
}

.screen_nav {
    width: 90%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    margin-top: -1.2rem;
}

.screen_nav_button {
    width: 6.45rem;
    font-size: 1rem;
    background: url('../img/screenImg/newstyle/navtab.png') top left no-repeat;
    /* background-size: 100% 100%; */
    padding: 0.3125rem;
    text-align: center;
    background-size: 100% 100%;
}
.screen_nav_link{
    height: 100%;
    width: 100%;
}
.screen_nav_link .active{
    background-color: #1ED2FF;
}

.screen_echarts_box {
    width: 100%;
    height: 100%;
}

.screenEcharts {
    width: 96%;
    height: 98%;
    margin: 10px auto;

}

.gridimg_box {
    width: 100%;
    height: 100%;
    border: 2px solid #1D6196;
}
.screen_main_center{
    width: 100%;
    height: 100%;
}

.templeate_bg {
    background: url(../img/screenImg/newstyle/bgkuang2.png) no-repeat left top;
    background-size: 100% 100%;
  
    color: #f8f6fb;
   
}

.row12_templeate_bg {
    /* /* background: rgba(56, 58, 76, 0.4); */
    /* padding: 1rem; */
    background: url(../img/screenImg/newstyle/line2.png) no-repeat left top;
    background-size: 100% 100%;
    /* box-shadow: inset 0 0 6px skyblue;  */
    color: #f8f6fb;

}

.rol12_screen_templeate_title {
    width: 98%;
    height: 2.7rem;
    line-height: 2.55rem;
    /* margin: 10px; */
    color: #00A8FF;
    background: url(../img/screenImg/newstyle/line2.png);
    background-size: 100% 100%;
    font-size: 1.125rem;
    text-align: left;
    text-indent: 1em;
    font-weight: bold;
    letter-spacing: 1px;
}

.screenGridImg {
    width: 100%;
    height: 95%;
    padding: 10px;
    background-size: 100% 100%;
}

.scrennCenterA {
    height: 47vh;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
}

.scrennCenterB {
    height: 86vh;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
}

.scrennCenterC {
    position: relative;
    height: 49%;
    width: 100%;
    margin-bottom: 16px;
}

.screnn_content_bottom {
    height: 37vh;
    width: 100%;
    /* padding: 10px; */
    overflow: hidden;
}

.dataflex {
    display: flex;
    height: 92%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.dataflex>div {
    /* flex: 1; */
    width: 70%;
    height: 25%;
    /* line-height: 25%; */
    margin-bottom: 0.625rem;
    position: relative;
    justify-content: center;
    /* background-color: #0d538bb4; */
    background: url(../img/screenImg/newstyle/numkuang.png);
    background-size: 100% 100%;
    border-radius: 10px 10px 5px 5px;
    -webkit-border-radius: 10px 10px 5px 5px;
    -moz-border-radius: 10px 10px 5px 5px;
    -ms-border-radius: 10px 10px 5px 5px;
    -o-border-radius: 10px 10px 5px 5px;
}

.dataflex>div>div {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dataflex>div>div span {
    color: #1ED2FF;
    display: block;
    font-size: 1rem;
}

.dataflex>div>div span:last-child {
    display: block;
    font-weight: bold;
    font-size: 1.125rem;
    /* background: linear-gradient(#00a8ff 0%, #8fdffe 100%); */
    color: transparent;
    background-image: -webkit-linear-gradient(bottom, #00a8ff, #8fdffe, #69cff7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dataflexB {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

.dataflexBLi {
    border: 2px solid #1D6196;
    background-color: #0B2A61;
    border-radius: 10x 10px 0 0;
    box-shadow: inset 0 0 6px skyblue;
    list-style: none;
    float: left;
    /* display: flex;   flex 下textalign效果失效 */
    height: 110px;
    width: 25%;
    text-overflow: clip;
    overflow: hidden;
    word-wrap: normal;
    text-align: center;
    -webkit-border-radius: 10x 10px 0 0;
    -moz-border-radius: 10x 10px 0 0;
    -ms-border-radius: 10x 10px 0 0;
    -o-border-radius: 10x 10px 0 0;
    /* border-top: 1px solid #fff; */
}

.dataflexBLi span {
    display: block;
    /*width: 100%;
    */
    text-align: center;
    font-size: 1.8rem;
    color: rgb(233, 220, 103);
    font-family: electronicFont;
    border-left: 1px solid rgba(92, 146, 163, 0.521);
}

.dataflexBLi span:first-child {
    /* border-bottom:  1px solid rgba(92, 147, 163, 0.808) ; */
    /* text-decoration: underline; */
    font-size: 1.125rem;
    width: 100%;
    overflow-x: hidden;
    text-align: center;
    color: #fff;
    /* text-shadow: 3px 3px #0a2bcc; */
    font-weight: bold;
    padding: 10px;
    /* letter-spacing: 1px; */
}

#notdealsafety {
    margin-top: 16px;
}

.screen_xgplan {
    margin-top: 26px;
    height: 69.5%;
    padding: .625rem;
    padding-bottom: 20px;
    overflow: hidden;
}

.screen_table {
    width: 90%;
    margin: 0 10px;
    margin-top: 1rem;
    height: 80%;
    text-align: center;
    /* background-color: #1A488D; */
    font-size: 1.125rem;
    line-height: 3rem;
    overflow: hidden;
}

.screen_table li {
    display: flex;
    text-align: center;
    font-size: .875rem;
    height: 2rem;
    line-height: 2rem;
    margin-bottom: .625rem;
    /* border: 1px #8346a940 solid */
}

.screen_table li span {
    flex: 1;
}

.screen_table_th {
    color: aqua;
    background-color: #1A488D;
    font-weight: bold;
    font-weight: bold;
}

.patrol_scroll {
    display: flex;
    padding: .5rem;
    justify-content: space-around;
    align-items: center;
}

.screen_notice {
    box-shadow:  0px 0px 1em #6faacc inset ;

    /* box-shadow: inset 0 0 6px skyblue; */
    /* width: 91%; */
    height: 6.75rem;
    overflow: hidden;
    font-size: 1rem;
    color: rgb(249, 253, 253);
    background: rgba(13, 25, 57, 0.45);
    /* border: 2px solid; */
    border-image: linear-gradient(0deg, rgba(33, 105, 178, 0.90) 0%, rgba(83, 133, 189, 0.90) 50%, rgba(33, 105, 178, 0.90) 100%) 2 2;
}

.screen_notice>div span {
    display: block;
}

.LB_scroll_box {
    height: 11.6vh;
    width: 96%;
    margin: 0 auto;
    overflow: hidden;
    background: rgba(56, 58, 76, 0.4);
    box-shadow: inset 0 0 6px skyblue;
    color: #f8f6fb;
    border: 5px solid #053b77;
    padding: 0.625rem;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.LB_scroll {
    height: 100%;
}

.noticeItem {
    height: 6.4rem;
    overflow: hidden;
    font-size: 0.8rem;
}

.safetyContent {
    width: 100%;
    padding: 0.3125rem;
    margin-top: 1.25rem;
    font-size: 1rem;
    color: tomato;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    /* text-overflow:clip; */
}

.clearfix:after {
    /*正常浏览器清除*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /*ie浏览器清除*/
    *zoom: 1;
}

.ceShiTable {
    margin-top: 16px;
    padding: 10px 15px;
    text-align: center;
    font-size: 12px;
    height: 100%;
    width: 95%;
}

.ceShiTable-text2 {
    width: 20%;
    display: inline-block;
}

.ceShiTable-title {
    background: rgba(0, 180, 251, 0.5);
    /* background-color: rgba(11, 28, 255, 0.4); */
    color: aqua;
}

.ceShiTable-title span {
    font-size: 1rem;
    height: 3rem;
    line-height: 3rem;
}

.ceShiTable-body {
    height: calc(100% - 25%);
    overflow-y: scroll;
    color: #a1b6e5;
}

.ceShiTable ul {
    padding-inline-start: 0px;
}

.ceShiTable ul .noData {
    height: 5%;
    line-height: 78px;
}

.ceShiTable ul .noData li {
    background: transparent;
    display: flex;
    align-items: center;
    min-height: 24px;
}

.ceShiTable ul .noData li span {
    font-size: 1rem;
    padding: 0.3125rem;
    height: 5%;
}

.ceShiTable ul li {
    font-size: 1rem;
    padding: 0.3125rem;
}

.ceShiTable ul li:nth-child(2n) {
    background: rgba(157, 217, 255, 0.1)
}

.ceShiTable ul li:hover {
    background: rgba(87, 98, 250, 0.4);
    color: rgba(255, 255, 255, 1);
}

.ceShiTable-body::-webkit-scrollbar {
    width: 3px;
}

.ceShiTable-body::-webkit-scrollbar-thumb {
    width: 3px;
    background: rgba(0, 180, 251, 0.5);
    border-radius: 7px;
    box-shadow: inset 0 0 15px rgba(0, 180, 251, 1);
}

.alertss {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 40px;
    display: '';
    background-color: bisque;
    color: saddlebrown;
    font-size: 30px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.tankuang {
    position: absolute;
    left: 50%;
    top: 57%;
    border: 2px solid black;
    padding: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* text-align: center; */
    transform: translate(-50%, -50%);
    background: #251056;
    color: #fff;
    width: 45%;
    height: 84%;
    border-radius: 5px;
    z-index: 999;
    box-shadow: 2px 2px 20px rgb(17, 42, 112);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    overflow: hidden;
}

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: 100%;
    padding: 16px;
}

.event {
    color: rgb(228 82 13);
    font-weight: bold;
    font-size: 2rem;
}

#eventicons {
    display: block;
    margin-left: -1.5rem;
    margin-top: -1.25rem;
    width: 3.75rem;
    height: 3.75rem;
    max-width: 100%;
    max-height: 100%;
}

.screen_echarts_inorout_first {
    margin-left: 2rem;
    margin-top: 2rem;
}

.screen_echarts_inorout_first span{
    font-weight:bold;
	color:#ff9955;
}

.screen_echarts_inorout_first p {
    font-size: 16px;
}